<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=+, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/js/jquery.min.js"></script>
    <link href="/static/css/alert.css" rel="stylesheet">
    <link href="/static/css/css.css" rel="stylesheet">
    <style>
        .an-button-list{
            width: 100%;
            height: 35px;
            display: flex;
            align-self: end;
            justify-items: center;
        }
        .an-button,
        .an-buttoned{
            margin-right:4px;
            margin-top: 10px;
            width: 110px;
            height: 35px;
            border: 1px solid #fff;
            border-radius: 5px 5px 0px 0px;
            border-bottom: none;
            text-align: center;
            overflow: hidden;
        }
        .an-button a,
        .an-buttoned a{
            height: 35px;
            line-height: 35px;
            display: block;
        }
        .an-button a{
            color: #fff;
        }
        .an-button:hover a{
            color:red;
            background-color: #1dddd1;
        }
        .an-button{
            background-color: #4b99ff;
        }
        .an-buttoned{
            background-color: #d8fc57;
        }
        .an-buttoned a{
            color: #999;
        }
        .invoice-container {  
            position: fixed;
            top:10%;
            left:50%;
            margin-left:-300px;
            width: 620px;
            background-color: #fff;  
            padding: 20px;  
            border-radius: 5px;  
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1001;
        }  
        .invoice-header {  
            text-align: center;  
            margin-bottom: 20px;  
        }  
        .invoice-header h1 {  
            margin: 0;  
        }  
        .invoice-info {  
            margin-bottom: 20px;  
        }  
        .invoice-info p {  
            margin: 5px 0;  
        }  
        .invoice-items {  
            width: 100%;  
            border-collapse: collapse;  
        }  
        .invoice-items th, .invoice-items td {  
            padding: 8px;  
            text-align: left;  
            border-bottom: 1px solid #ddd;  
        }  
        .invoice-items th {  
            background-color: #f2f2f2;  
        }  
        .invoice-total {  
            text-align: right;  
            margin-top: 20px;  
            font-weight: bold;  
        }
        .piao{
            display: none;
        }
        .piao .button{
            width: 100%;
            display: block;
            background-color: #fff;
            height: 50px;
            line-height: 50px;
            margin: 10px auto;
            border: none;
            text-align: center;
        }
        .piao .button a{
            background-color: #4b99ff;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 5px;
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            padding:5px;
            margin: 0px 5px;
        }
    </style>
    <script>
        function amount_page(e){
            button(e);

        }
        function amount_add(e){
            button(e);

        }
        function amount_piao(order_no,amount){
            let string = '';
            // 创建一个新的 Date 对象  
            const currentDate = new Date();  
            // 获取年份（getFullYear() 方法返回四位数的年份）  
            const year = currentDate.getFullYear();  
            // 获取月份（getMonth() 方法返回的月份是从 0 开始的，所以需要加 1）  
            const month = currentDate.getMonth() + 1;  
            // 获取日期（getDate() 方法返回一个月中的某一天，1 到 31）  
            const day = currentDate.getDate();  
            // 格式化并显示当前的年月日  
            const formattedDate = `${year}年${month < 10 ? '0' : ''}${month}月${day < 10 ? '0' : ''}${day}日`;  
            console.log(formattedDate);
            block_mask_show();
            document.getElementById('piao').style = 'display:block';
            document.getElementById('order_no').innerText = order_no;
            document.getElementById('amount').innerText = amount;
            document.getElementById('now-date').innerText = formattedDate;
            $.ajax({
                url:'/index/order/info?order_no=' + order_no,
                type: 'GET', // 请求类型，可以是 'GET' 或 'POST'  
                dataType: 'json', // 预期服务器返回的数据类型  
                success: function(res) { 
                    if(res.code == 200){
                        res.data.info.forEach(item => {
                            string += '<tr>';
                            string += '<td>' + item.keyword + '</td>';
                            string += '<td>' + res.data.word_day + '</td>';
                            string += '<td>' + res.data.keyword_area + '</td>';
                            string += '<td>' + item.price + '</td>';
                            string += '</tr>';
                        });
                        document.getElementById('info-list').innerHTML = string;
                    }
                }
            });
        }
        function button(e){
            let buttons = document.getElementsByName('an-buttons');
            buttons.forEach(item => {
                item.className = 'an-button';
            });
            document.getElementById('button-' + e).className = 'an-buttoned';
        }
    </script>
</head>
<body>
    <div class="piao invoice-container" id="piao">
        <div class="invoice-header">  
            <h1>电子发票</h1>  
        </div>  
        <div class="invoice-info">  
            <p>发票号码: <span id="order_no">ABC123456</span></p>  
            <p>开票日期: <span id="now-date">2023年10月5日</span></p>  
            <p>发票类型: 普通发票</p>  
        </div>  
        <div class="invoice-customer">  
            <p>购货单位:一飞传媒</p>  
            <p>地址: 温州市北大科技园区B219<br>电话: 13587899596</p>  
        </div>  
        <table class="invoice-items">  
            <thead>  
                <tr>  
                    <th>关键词</th>  
                    <th>有效时长</th>  
                    <th>投放平台</th>  
                    <th>金额</th>  
                </tr>  
            </thead>  
            <tbody id="info-list">  
                <tr>  
                    <td>商品A</td>  
                    <td>1</td>  
                    <td>¥100.00</td>  
                    <td>¥100.00</td>  
                </tr>  

            </tbody>  
        </table>  
        <div class="invoice-total">  
            总计金额: ¥<span id="amount"></span>
        </div>  
        <div class="button">
            <a href="javascript:upload();">下载</a>
            <a href="javascript:hiddenmsg();">取消</a>
        </div>
    </div>
    <div class="main" id="main">
        <div class="an-button-list">
            <div class="an-buttoned" id="button-1" name="an-buttons">
                <a href="javascript:amount_page(1);">
                    余额列表
                </a>
            </div>
            <div class="an-button" id="button-2" name="an-buttons">
                <a href="javascript:amount_add(2);">
                    在线充值
                </a>
            </div>
        </div>
        <div class="search-data" id="sreach_list">
            <div class="search-div">
                <label for="order_no">订单号:</label>
                <input type="text" id="order" placeholder="订单号" value="">
            </div>
            <div class="search-div">
                <label for="">类型:</label>
                <select id="">
                    <option value="1">订单</option>
                    <option value="2">后台修改</option>
                </select>
            </div>
            <div class="search-div">
                <a href="javascript:;" onclick="search()">搜索</a>
            </div>
        </div>
        <div class="order-page">
            <table class="order-page-table">
                <thead>
                    <tr>
                        <th>订单号</th>
                        <th>金额</th>
                        <th>交易完成前余额</th>
                        <th>交易完成后余额</th>
                        <th>下单时间</th>
                        <th>到期时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="order-list">
                    {volist name="list" id="value"}
                    <tr>
                        <td>{$value.order_no}</td>
                        <td>{$value.amount}</td>
                        <td>{$value.before_amount}</td>
                        <td>{$value.after_amount}</td>
                        <td>{$value.user_id}</td>
                        <td>{$value.type_text}</td>
                        <td>
                            <a href="javascript:amount_piao('{$value.order_no}','{$value.amount}');">申请开票</a>
                        </td>
                    </tr>
                    {/volist}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="8">
                            <div class="page">
                                {$list|raw}
                            </div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</body>
<script src="/static/js/base.js"></script>
</html>